<template>
  <div class="menu">
    <ul>
      <template v-for="item in listMenu" :key="item">
        <li  @click="hrefPage(item.path)"><icon-align-left /><span class="pl-10px">{{ item.name }}</span></li>
      </template>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const listMenu = ref()
listMenu.value = [
  {
    name: '根据坐标画线',
    path: '/demo1',
  },
  {
    name: 'Canvas图层',
    path: '/demo2',
  },
   {
    name: '轨迹回放',
    path: '/demo3',
  },
    {
    name: '圆点标记',
    path: '/demo4',
  },
]
const router = useRouter()
function hrefPage(path) {
  router.push({
    path: path,
  })

}
// import AMapLoader from '@amap/amap-jsapi-loader'
// let map = shallowRef(null)

// function ininMap() {
//   AMapLoader.load({
//     key: '167887b5a9ae24b2b91fd1d2b1308071', // 申请好的Web端开发者Key，首次调用 load 时必填
//     version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//     plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
//     AMapUI: {
//       // 是否加载 AMapUI，缺省不加载
//       version: '1.1', // AMapUI 缺省 1.1
//       plugins: [], // 需要加载的 AMapUI ui插件
//     },
//     Loca: {
//       // 是否加载 Loca， 缺省不加载
//       version: '1.3.2', // Loca 版本，缺省 1.3.2
//     },
//   })
//     .then(AMap => {
//       map.value = new AMap.Map('Map1', {
//         // zoom: 11, //级别
//         // center: [116.397428, 39.90923], //中心点坐标
//         // viewMode: '3D', //使用3D视图,
//         // mapStyle: 'amap://styles/grey',

//         rotateEnable: true,
//         pitchEnable: true,
//         zoom: 17,
//         pitch: 50,
//         rotation: -15,
//         viewMode: '3D', //开启3D视图,默认为关闭
//         zooms: [2, 20],
//         center: [116.333926, 39.997245],
//       })

//       let position = [116, 39] //经纬度
//       map.value.setCenter(position) // 设置地图中心点
//       map.value.setZoom() //设置地图 层级
//       map.value.setZoom() //得到地图 层级
//       map.value.setZoomAndCenter(14, [116.205467, 39.907761]) // 设置 层级 与 中心点
//     })
//     .catch(e => {
//       console.log(e)
//     })
// }

// watchEffect(() => {
//   // console.log(map)
// })

// onMounted(() => {
//   ininMap()
// })

// export default {
//   setup () {
//     AMapLoader.load({
//       "key": "		167887b5a9ae24b2b91fd1d2b1308071",              // 申请好的Web端开发者Key，首次调用 load 时必填
//       "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//       "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
//       "AMapUI": {             // 是否加载 AMapUI，缺省不加载
//         "version": '1.1',   // AMapUI 缺省 1.1
//         "plugins": [],       // 需要加载的 AMapUI ui插件
//       },
//       "Loca": {                // 是否加载 Loca， 缺省不加载
//         "version": '1.3.2'  // Loca 版本，缺省 1.3.2
//       },
//     }).then((AMap) => {
//       var map = new AMap.Map('Map1', {
//         zoom: 11,//级别
//         center: [116.397428, 39.90923],//中心点坐标
//         viewMode: '3D',//使用3D视图,
//         mapStyle: "amap://styles/grey"
//       });

//       let position = [116, 39] //经纬度
//       map.setCenter(position); // 设置地图中心点
//       map.setZoom()  //设置地图 层级
//       map.setZoom()  //得到地图 层级
//       map.setZoomAndCenter(14, [116.205467, 39.907761]); // 设置 层级 与 中心点

//     }).catch(e => {
//       console.log(e);
//     })

//   }
// }
</script>
<style scoped>
.menu ul {
  @apply m-20px;
}
.menu ul li {
  @apply mt-10px cursor-pointer;
}
</style>
